<template>
    <orh-table add="add" @on-add="show = true" del="del" @on-del="delConfirm" reload @on-reload="reload">
        
        <Table border stripe :data="data" :columns="columns" highlight-row @on-selection-change="selectOne" :loading="tableload" slot="table"></Table>
        
        <Modal v-model="show" title="分配负责人" @on-ok="show = false" slot="others">
            <Transfer :data="datas" :target-keys="targetKeys" :render-format="renders"
                :list-style="listStyle" filterable :titles="['全校老师', '已分配老师']" :operations="['移除','添加']"
                @on-change="handleChange"></Transfer>
        </Modal>

    </orh-table>
</template>
                
<script>
export default {
    name: 'dutymodule-dutyresponsibleperson',
    
    data () {
        return {
            show: false,
            tableload:false,
            data: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '审核人',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.user_info.name.zh
                        return h('div', name)
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    transfer: true,
                                    title: `您确定要删除这条德育项吗?`,
                                    type: 'error',
                                    size: 'small',
                                    placement:'left-end'
                                },
                                style: {
                                    textAlign: 'left',
                                },
                                on: {
                                    'on-ok': () => {
                                        this.remove(params.row.id)
                                    }
                                }
                            }, [
                                h('Button', {
                                    directives: [
                                        {
                                            name: 'button',
                                            value: 'del',
                                        }
                                    ],
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, '删除')
                            ])
                        ]);
                    }
                },
            ],

            url: 'api/watchlists/v1/securityteacher/index',
            delUrl: 'api/watchlists/v1/securityteacher/del/',

            del: [],

            listStyle: {
                width: '203px',
                height: '300px'
            },
            
            datas: [],
            targetKeys: [],
            teacherurl: 'api/user/v1/user/list?user_type=teacher',
            addurl:'api/watchlists/v1/securityteacher/add'
        }
    },

    methods: {
        renders (item) {
            return item.label;
        },
        handleChange (newTargetKeys, direction, moveKeys) {
            if (direction === 'left') {
                this.del = moveKeys.map(el => {
                    let num = this.data.find(item => item.user_id === el)
                    return num.id
                })
                this.delSubmit ()
            }
            if (direction === 'right') {
                this.addSubmit (moveKeys)
            }
        },
        
        /************************************************************
         * 
         * 执行添加数据
         * 
         ************************************************************/
        addSubmit (moveKeys) {
            let data = {
                user_id: moveKeys
            }
            this.$http.post(this.addurl, data).then(val=>{
                this.reload()
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 全校老师
         * 
         ************************************************************/
        teacherData () {
            this.$http.get(this.teacherurl).then(val=>{
                this.datas = val.data.map(el => ({
                    key: el.teacher.user_id,
                    label: el.teacher.teacher_name.zh
                }))
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 删除确认
         * 
         ************************************************************/
        delConfirm () {
            if (this.del.length) {
                this.$Modal.confirm({
                    title: '删除确认',
                    closable: true,
                    loading: true,
                    content: '您确定要删除这条数据吗?',
                    onOk: () => {
                        this.delSubmit ()
                    }
                })
            }
        },
        
        /************************************************************
         * 
         * 单条删除
         * @param   {index}           要删除的id
         * 
         ************************************************************/
        remove (index) {
            this.del = []
            this.del.push(index)
            this.delSubmit()
        },
        
        /************************************************************
         * 
         * 批量删除选择
         * @param   {index}          选择的数据
         * 
         ************************************************************/
        selectOne (index) {
            this.del = []
            index.forEach(item => {
                this.del.push(item.id)
            });
        },
        
        /************************************************************
         * 
         * 执行删除
         * 
         ************************************************************/
        delSubmit () {
            if(this.del.length == 0){
                this.$Message.info('请选择删除项')
                this.prompt = false
                return
            }
            this.del = JSON.stringify(this.del)
            this.$http.delete(this.delUrl + this.del).then(val=>{
                this.reload()
            }).catch(err => {
            })
        },
        
        /************************************************************
         * 
         * 当添加或修改数据成功后重新请求数据
         * @param   {state}           添加修改成功后返回状态
         * 
         ************************************************************/
        requery (state) {
            if(state == true){
                this.show = false
                this.reload()
            }
        },
        
        /************************************************************
         * 
         * 手动刷新
         * 
         ************************************************************/
        reload () {
            this.data = []
            this.tableload = true
            this.queryData()
        },
        
        /************************************************************
         * 
         * 查询数据
         * 
         ************************************************************/
        queryData () {
            this.tableload = true;
            this.$http.get(this.url).then(val=>{
                this.data = val.data
                this.targetKeys = val.data.map(el => { return el.user_id })
                this.tableload = false
            }).catch(err => {
                this.tableload = false
            })
        }
    },
    created () {
        this.teacherData ()
        this.reload ()
    },
}
</script>

